<!-- 横版大图，商品卡片 -->
<template>
  <view class="big-goods u-flex u-col-top" @tap="click">
    <view class="item_s">
      <view style="display: flex;">
        <view>
          <view style="display: flex;">
            <view class="jin">￥</view>
            <view class="qian">{{ detail.amount }}</view>
          </view>
          <view class="yong">{{ detail.enough_text }}</view>
        </view>
        <view style="margin-left: 66rpx;">
          <view class="name">{{ detail.name }}</view>
          <view class="dian">{{ detail.store_name }}</view>
          <view class="yxq">有效期截止：{{ detail.expire_text }}</view>
        </view>
        <!-- <view><image style="width: 58px;height: 34px;" src="../../static/images/shixiao.png"></image></view> -->
      </view>
      <view style="display: flex;position: relative;">
        <view class="fw">适用范围：{{ detail.store_name }}</view>
        <view class="btn">
          <view class="qsy" v-if="!detail.is_send" @click="getGoodsDetail(detail)">领取</view>
          <view class="qsy" v-else  @click="toshangjia(detail)">去使用</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
/**
 *shoproGoodsCard - 商品列表卡片
 * @property {Object} detail - 商品详情
 * @property {String} type - 商品类型
 * @property {String} image - 商品图片
 * @property {String} title - 商品标题
 * @property {String} subtitle - 商品副标题
 * @property {String | Number} price - 商品价格
 * @property {String | Number} originPrice - 商品原价
 * @property {String | Number} sales - 商品销量
 * @property {Array} tagTextList - 活动标签
 * @event {Function} click 商品被点击
 */
import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
export default {
  components: {},
  data() {
    return {
      showSku: false,
      goodsInfo: {}, //商品详情
    };
  },
  props: {
    detail: {
      type: Object,
      default: () => {
        return {};
      }
    },
    index:{
      type: Number,
      default: () => {
        return 0;
      }
    }
  },
  mounted() {},
  methods: {
    click(){
      this.$emit('click',this.index)
    },
    // 商品详情
    getGoodsDetail(item) {
      let that = this;
      that.$https('common.getmibaoquan', {
        token: uni.getStorageSync("token"),
        store_coupon_id:item.store_coupon_id
      }).then(res => {
        if (res.code === 1) {
          this.$u.toast(res.msg);
          that.click();
        }
      });
    },
    // 去使用米包券
    toshangjia(item) {
        this.$Router.push({ path: '/pages/index/GoodsDetails', query: { id: item.store_shop_id } });
    }
  }
};
</script>

<style lang="scss" scoped>
.item_s {
  background: url('../../static/images/Group 2435.png');
  position: relative;
  width: 678rpx;
  height: 300rpx;
  background-size: 100%;
  position: relative;
}
.btn{
  width:132rpx;
  height: 64rpx;
  background: #FC5351;
  border-radius: 8px 8px 8px 8px;
  opacity: 1;
  color: #FFFFFF;
  position: absolute;
  right: 20rpx;
  top: 45rpx;
}
.jin{
  width: 36rpx;
  height: 50rpx;
  font-size: 36rpx;
  font-family: PingFang SC-Bold, PingFang SC;
  font-weight: bold;
  color: #FC5351;
  line-height: 42rpx;
  margin-left: 46rpx;
  margin-top:56rpx;
}
.qian{
  // width: 92rpx;
  height: 96rpx;
  font-size: 60rpx;
  font-family: PingFang SC-Bold, PingFang SC;
  font-weight: bold;
  color: #FC5351;
  line-height: 80rpx;
  margin-top:34rpx;
}
.name{
  font-size: 36rpx;
  font-family: PingFang SC-Bold, PingFang SC;
  font-weight: bold;
  color: #FC5351;
  line-height: 42rpx;
  margin-top: 24rpx;
}
.dian{
  font-size: 24rpx;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #333333;
  line-height: 28rpx;
  margin-top: 20rpx;
}
.yxq{
  font-size: 24rpx;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 28rpx;
  margin-top: 20rpx;
}
.fw{
  font-size: 24rpx;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
  margin-top: 60rpx;
  margin-left: 24rpx;
}
.yong{
  font-size: 24rpx;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #FC5351;
  line-height: 28rpx;
  margin-left: 44rpx;
}
.qsy{
  text-align: center;
  margin-top: 10rpx;
}
</style>
